<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="../css/style.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
		</style>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron" id="list">
					<li class="mui-table-view-cell">
						<div class="mui-card">
							<div class="mui-card-header mui-card-media">
								<img src="../images/car.png"/>
								<div class="mui-media-body">
									接人
									<p>2018-5-6 13:10:50</p>
								</div>
							</div>
							<div class="mui-card-content" >
								<div class="mui-row">
							        <div class="mui-col-sm-6 mui-col-xs-6">
							        	<div class="info-detail">							        		
							        		<div class="red-point"></div>
							        		<p class="info-key">联系人:</p>	
							        		<div class="info-value">阿灿笑眯眯的</div>
							        	</div>
							        </div>
							        <div class="mui-col-sm-6 mui-col-xs-6">
							        	<div class="info-detail">							        		
							        		<div class="orange-point"></div>
							        		<p class="info-key">电话:</p>	
							        		<div class="info-value">15366602513</div>
							        	</div>
							        </div>
							    </div>
							    
							    <div class="mui-row">
							        <div class="mui-col-sm-6 mui-col-xs-6">
							        	<div class="info-detail">							        		
							        		<div class="yellow-point"></div>
							        		<p class="info-key">始发地:</p>	
							        		<div class="info-value">南京站</div>
							        	</div>
							        </div>
							        <div class="mui-col-sm-6 mui-col-xs-6">
							        	<div class="info-detail">							        		
							        		<div class="green-point"></div>
							        		<p class="info-key">目的地:</p>	
							        		<div class="info-value">南京南</div>
							        	</div>
							        </div>
							    </div>
							    
							    <div class="mui-row">
							        <div class="mui-col-sm-6 mui-col-xs-6">
							        	<div class="info-detail">							        		
							        		<div class="cyan-point"></div>
							        		<p class="info-key">开始时间:</p>	
							        		<div class="info-value">8:15:12</div>
							        	</div>
							        </div>
							        <div class="mui-col-sm-6 mui-col-xs-6">
							        	<div class="info-detail">							        		
							        		<div class="orange-point"></div>
							        		<p class="info-key">结束时间:</p>	
							        		<div class="info-value">12:33:20</div>
							        	</div>
							        </div>
							    </div>
							    
							    <div class="mui-row">
							        <div class="mui-col-sm-6 mui-col-xs-6">
							        	<div class="info-detail">							        		
							        		<div class="red-point"></div>
							        		<p class="info-key">任务状态:</p>	
							        		<div class="info-value">预约中</div>
							        	</div>
							        </div>
							    </div>
								
							</div>
							<div class="mui-card-footer">
								<a class="mui-card-link">开始</a>
								<a class="mui-card-link">结束</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/config.js"></script>
		<script src="../js/app.js"></script>
		<script>
			(function($) {
				mui.init({
					swipeBack: false,
					keyEventBind: {
						backbutton: false //关闭back按键监听
					},
					pullRefresh: {
						container: '#pullrefresh',
						up: {
							contentrefresh: '正在加载...',
							callback: pullupRefresh
						},
						down : {
	//						height:100,//可选,默认50.触发下拉刷新拖动距离,
							auto: true,//可选,默认false.首次加载自动下拉刷新一次
	//						contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
	//						contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
	//						contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
							callback :pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						}
					}
				});
				
				function formatHours(date){
					var hour = date.getHours();
					if(hour.toString().length == 1){
						hour = "0" + hour;
					}
					var minute = date.getMinutes();
					if(minute.toString().length == 1){
						minute = "0" + minute;
					}
					var second = date.getSeconds();
					if(second.toString().length == 1){
						second = "0" + second;
					}
					
					return hour + ":" + minute+ ":" + second;
				}
				
				function formatDate(date){
					var year = date.getYear();
					var month = date.getMonth()+1;
					var day = date.getDate();
					
					var hour = date.getHours();
					if(hour.toString().length == 1){
						hour = "0" + hour;
					}
					var minute = date.getMinutes();
					if(minute.toString().length == 1){
						minute = "0" + minute;
					}
					var second = date.getSeconds();
					if(second.toString().length == 1){
						second = "0" + second;
					}
					
					return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
				}
				
				function stateCheck(state){
					var result = "已结束";
					switch(state){
						case 0:
							result = "预约中";
							break;
						case 1:
							result = "在途中";
							break;
						case 2:
							result = "已结束";
							break;
					}
					
					return result;
				}
				
				function taskItem (task, i){
					var startTime = formatHours(new Date(task.startTimestamp*1000));
					var endTime = formatHours(new Date(task.endTimestamp*1000));
					var createdAt = formatDate(new Date(task.updatedAt));
					
					var innerHtml = '<div class="mui-card">'
									+	'<div class="mui-card-header mui-card-media">'
									+		'<img src="../images/car.png"/>'
									+		'<div class="mui-media-body">'
									+			task.purpose
									+			'<p>'+createdAt+'</p>'
									+		'</div>'
									+	'</div>'
									+	'<div class="mui-card-content" >'
									+		'<div class="mui-row">'
									+	        '<div class="mui-col-sm-6 mui-col-xs-6">'
									+	        	'<div class="info-detail">'					        		
									+	        		'<div class="red-point"></div>'
									+	        		'<p class="info-key">联系人:</p>	'
									+	        		'<div class="info-value">'+task.linkman+'</div>'
									+	        	'</div>'
									+	        '</div>'
									+	        '<div class="mui-col-sm-6 mui-col-xs-6">'
									+	        	'<div class="info-detail">'						        		
									+	        		'<div class="orange-point"></div>'
									+	        		'<p class="info-key">电话:</p>'	
									+	        		'<div class="info-value">'+task.phone+'</div>'
									+	        	'</div>'
									+	        '</div>'
									+	    '</div>'
										    
									+	    '<div class="mui-row">'
									+	        '<div class="mui-col-sm-6 mui-col-xs-6">'
									+	        	'<div class="info-detail">'						        		
									+	        		'<div class="yellow-point"></div>'
									+	        		'<p class="info-key">始发地:</p>	'
									+	        		'<div class="info-value">'+task.startAddress+'</div>'
									+	        	'</div>'
									+	        '</div>'
									+	        '<div class="mui-col-sm-6 mui-col-xs-6">'
									+	        	'<div class="info-detail">'					        		
									+	        		'<div class="green-point"></div>'
									+	        		'<p class="info-key">目的地:</p>	'
									+	        		'<div class="info-value">'+task.endAddress+'</div>'
									+	        	'</div>'
									+	        '</div>'
									+	    '</div>'
										    
									+	    '<div class="mui-row">'
									+	        '<div class="mui-col-sm-6 mui-col-xs-6">'
									+	        	'<div class="info-detail">'							        		
									+	        		'<div class="cyan-point"></div>'
									+	        		'<p class="info-key">开始时间:</p>'
									+	        		'<div class="info-value">'+startTime+'</div>'
									+	        	'</div>'
									+	        '</div>'
									+	        '<div class="mui-col-sm-6 mui-col-xs-6">'
									+	        	'<div class="info-detail">'						        		
									+	        		'<div class="orange-point"></div>'
									+	        		'<p class="info-key">结束时间:</p>'	
									+	        		'<div class="info-value">'+endTime+'</div>'
									+	        	'</div>'
									+	        '</div>'
									+	    '</div>'
										    
									+	    '<div class="mui-row">'
									+	        '<div class="mui-col-sm-6 mui-col-xs-6">'
									+	        	'<div class="info-detail">'							        		
									+	        		'<div class="red-point"></div>'
									+	        		'<p class="info-key">任务状态:</p>'	
									+	        		'<div class="info-value">'+stateCheck(task.state)+'</div>'
									+	        	'</div>'
									+	        '</div>'
									+	    '</div>'
											
									+	'</div>'
									+	'<div class="mui-card-footer">'
									+		'<a class="mui-card-link" id=start-'+i+'>开始</a>'
									+		'<a class="mui-card-link" id=finish-'+i+'>结束</a>'
									+	'</div>'
									+'</div>';
					return innerHtml;
				};
				
				var count = 1;
				/**
				 * 上拉加载具体业务实现
				 */
				function pullupRefresh() {
					console.log("上拉刷新");
					//获取当天任务
				    var listUrl = config.getRecentListUrl();
				    var token = app.getState().token;
				    count++;
				   	var todayList = {
				   		"date": 1,
				   		"limit": 10,
				   		"page": count,
				   		"token": token
				   	}
				   
				    mui.ajax(listUrl,{
						data: todayList,
						dataType: 'json',//服务器返回json格式数据
						type: 'get',//HTTP请求类型
						success: function(data){
							//服务器返回响应，根据响应结果，分析是否登录成功；
							//保存用户名、密码、token
							if(data.rows.length){
								var table = document.body.querySelector('.mui-table-view');
								var cells = document.body.querySelectorAll('.mui-table-view-cell');

				                var tasks = data.rows;				                
				                for(var i = cells.length, len = i + tasks.length; i < len; i++) {
									var li = document.createElement('li');
									li.className = 'mui-table-view-cell';		
									li.id = "li-" + i;
									li.innerHTML = taskItem(tasks[i], i);
									table.appendChild(li);
								}
							}else{
								setTimeout(function() {
									mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
								}, 1000)
							}
							
			                
						},
						error: function(xhr,type,errorThrown){
							//console.log(xhr.response)
							var response = xhr.response;
							//errorResponse(JSON.parse(response));
							console.log(response)
						}
					});		
				}
				
				function pulldownRefresh() {
					console.log("下拉刷新");
					//获取当天任务
				    var listUrl = config.getRecentListUrl();
				    var token = app.getState().token;
				   	var todayList = {
				   		"date": 1,
				   		"limit": 10,
				   		"page": 1,
				   		"token": token
				   	}
				   
				    mui.ajax(listUrl,{
						data: todayList,
						dataType: 'json',//服务器返回json格式数据
						type: 'get',//HTTP请求类型
						success: function(data){
							//服务器返回响应，根据响应结果，分析是否登录成功；
							//保存用户名、密码、token
							//console.log(JSON.stringify(data));
							var table = document.body.querySelector('.mui-table-view');
							//先清空所有的li
			                while(table.hasChildNodes()) { //当table下还存在子节点时 循环继续
			                    table.removeChild(table.firstChild);
			                }
			                
			                var tasks = data.rows;
			                
			                for(var i = 0, len = tasks.length; i < len; i++) {
								var li = document.createElement('li');
								li.className = 'mui-table-view-cell';
								li.id = "li-" + i;
								li.innerHTML = taskItem(tasks[i], i);
								table.appendChild(li);
							}
			                
			                count = 1;
						},
						error: function(xhr,type,errorThrown){
							//console.log(xhr.response)
							var response = xhr.response;
							//errorResponse(JSON.parse(response));
							console.log(response)
						}
					});		
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					}, 1000)	
				}
				
				//添加newId自定义事件监听
				window.addEventListener('today',function(event){
				  	//获得事件参数
				  	//plus.nativeUI.toast(event.detail);
				  	pulldownRefresh();
				});
				
				mui("#list").on('tap','li',function(){
		            var id = this.getAttribute('id');
		            console.log(id);
		            
		            return false;
		        });
		        
		        mui(".mui-card-footer").on('tap', '.mui-card-link', function(ev){
		        	ev.cancelBubble = true;
		        	var id = this.getAttribute('id');
		            console.log(id);
		        })
			})(mui);
		</script>
	</body>
</html>